<template>
  <van-nav-bar
    class="header"
    :title="title"
    :left-text="leftText"
    :right-text="rightText"
    :left-arrow="leftArrow"
    :fixed="fixed"
    :border="border"
    :z-index="zIndex"
    @click-left="onClickLeft"
    @click-right="onClickRight"
    :style="ostyle"
  >
    <template slot="left"><slot name="oleft"></slot></template>
    <template slot="right"><slot name="oright"></slot></template>
  </van-nav-bar>
</template>

<script>
export default {
  props: ['title', 'leftText', 'rightText', 'leftArrow', 'fixed', 'border', 'zIndex', 'ostyle', 'titlecolor'],
  data () {
    return {}
  },
  methods: {
    onClickLeft () {
      if (this.$listeners['left']) {
        this.$emit('left')
      } else {
        this.$router.go(-1)
      }
    },
    onClickRight () {
      this.$emit('right')
    }
  },
  mounted () {
    if (this.titlecolor && this.titlecolor !== '') {
      document.getElementsByClassName('van-nav-bar__title')[0].style.color = this.titlecolor
    }
  }
}
</script>

<style lang="scss">
.header{
  width: 100%;
  height: .88rem;
  line-height: .88rem;
}
.van-nav-bar__title{
  font-size: .32rem;
}
</style>
